<template>
  <div class="jst_main">
    <div class="jst_head">
      <div class="jst_content">
        <div class="jst_layout">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-card shadow="hover" class="jgb20">
                <div class="dcard1">
                  <div class="dcard2">
                    <div class="dcard3">
                      <img src="../../assets/img/user-icon.png" />
                    </div>
                    <div class="dcard4">访问总数</div>
                  </div>

                  <div class="dcard5">6789</div>
                  <div class="dcard6">123 新用户</div>
                </div>
              </el-card>
            </el-col>

            <el-col :span="6">
              <el-card shadow="hover" class="jgb20">
                <div class="dcard1">
                  <div class="dcard2">
                    <div class="dcard3">
                      <img src="../../assets/img/add-cart.png" />
                    </div>
                    <div class="dcard4">新建任务总数</div>
                  </div>

                  <div class="dcard5">15500</div>
                  <div class="dcard6">10 最新</div>
                </div>
              </el-card>
            </el-col>

            <el-col :span="6">
              <el-card shadow="hover" class="jgb20">
                <div class="dcard1">
                  <div class="dcard2">
                    <div class="dcard3">
                      <img src="../../assets/img/money-icon.png" />
                    </div>
                    <div class="dcard4">利润总额</div>
                  </div>

                  <div class="dcard5">$43,900</div>
                  <div class="dcard6">$340 本周</div>
                </div>
              </el-card>
            </el-col>

            <el-col :span="6">
              <el-card shadow="hover" class="jgb20">
                <div class="dcard1">
                  <div class="dcard2">
                    <div class="dcard3">
                      <img src="../../assets/img/plane-icon.png" />
                    </div>
                    <div class="dcard4">任务完成总数</div>
                  </div>

                  <div class="dcard5">2600</div>
                  <div class="dcard6">120 本周</div>
                </div>
              </el-card>
            </el-col>

            <el-col :span="8">
              <el-card shadow="hover" style="height: 352px">
                <template #header>
                  <div class="clearfix">
                    <span>语言详情</span>
                  </div>
                </template>
                Vue
                <el-progress :percentage="71.3" color="#42b983"></el-progress
                >JavaScript
                <el-progress :percentage="24.1" color="#f1e05a"></el-progress
                >CSS <el-progress :percentage="13.7"></el-progress>HTML
                <el-progress :percentage="5.9" color="#f56c6c"></el-progress>
              </el-card>
            </el-col>

            <el-col :span="8">
              <el-card shadow="hover" style="height: 352px">
                <template #header>
                  <div class="clearfix">
                    <span>待办事项</span>
                  </div>
                </template>

                <el-table
                  :show-header="false"
                  :data="todoList"
                  style="width: 100%"
                >
                  <el-table-column width="40">
                    <template #default="scope">
                      <el-checkbox v-model="scope.row.status"></el-checkbox>
                    </template>
                  </el-table-column>
                  <el-table-column>
                    <template #default="scope">
                      <div
                        class="todo-item"
                        :class="{
                          'todo-item-del': scope.row.status,
                        }"
                      >
                        {{ scope.row.title }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="60">
                    <template>
                      <i class="el-icon-edit"></i>
                      <i class="el-icon-delete"></i>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>

            <el-col :span="8">
              <el-card shadow="hover" style="height: 352px">
                <template #header>
                  <div class="clearfix">
                    <span>更新动态</span>
                  </div>
                </template>
                <el-table :data="tableData" class="el-tab">
                  <el-table-column prop="Id" label="" width="30">
                  </el-table-column>
                  <el-table-column prop="address" label="项目名称" width="180">
                  </el-table-column>
                  <el-table-column prop="name" label="名称" width="70">
                  </el-table-column>
                  <el-table-column prop="date" label="开发日期">
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="16">
              <el-card shadow="hover" style="height: 352px">
                <template #header>
                  <div class="clearfix">
                    <span>项目进度</span>
                  </div>
                </template>
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column prop="address" label="项目名称" width="280">
                  </el-table-column>

                  <el-table-column prop="name" label="开发人员" width="180">
                  </el-table-column>

                  <el-table-column prop="date" label="开始日期" width="180">
                  </el-table-column>

                  <el-table-column prop="endtime" label="结束日期" width="180">
                  </el-table-column>

                  <el-table-column prop="status" label="状态">
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover" style="height: 352px">
                <template #header>
                  <div class="clearfix">
                    <span>开发成员</span>
                  </div>
                </template>
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column prop="date" label="开发日期" width="100">
                  </el-table-column>
                  <el-table-column prop="name" label="成员" width="70">
                  </el-table-column>
                  <el-table-column prop="address" label="项目名称">
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
            Id:1,
            date: '2023-08-11',
            name: '阿金',
            address: '前后端分离Ele+Vue 阿金',
            endtime:'2023-08-12',
            status:'进行中'
          }, {
            Id:2,
            date: '2023-08-11',
            name: '阿金',
            address: '前后端分离Ele+Vue 阿金',
            endtime:'2023-08-12',
            status:'进行中'
          }, {
            Id:3,
            date: '2023-08-11',
            name: '阿金',
            address: '前后端分离Ele+Vue 阿金',
            endtime:'2023-08-12',
            status:'进行中'
          }, {
            Id:4,
            date: '2023-08-11',
            name: '阿金',
            address: '前后端分离Ele+Vue 阿金',
            endtime:'2023-08-12',
            status:'进行中'
          }],
        todoList:([
            {
                title: "前后端分离Ele+Vue 阿金",
                status: false,
            },
            {
                title: "前后端分离Ele+Vue 阿金",
                status: false,
            },
            {
                title: "前后端分离Ele+Vue 阿金",
                status: false,
            },
            {
                title: "前后端分离Ele+Vue 阿金",
                status: true,
            },
            {
                title: "前后端分离Ele+Vue 阿金",
                status: true,
            },
        ])
    }
  },
  methods: {

  }
};
</script>

<style scoped>
.jst_layout {
  float: left;
  margin-top: 20px;
  margin-left: 20px;
  width: 97.5%;
  color: #000;
}
.el-row {
  margin-bottom: 20px;
}

.my-label {
  background: #e1f3d8;
}

.my-content {
  background: #fde2e2;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}
.jgb20 {
  height: 132px;
  box-shadow: 0 0 5px 0 rgba(18, 31, 62, 0.08);
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.schart {
  width: 100%;
  height: 300px;
}
.dcard1 {
  width: 100%;
  height: 100%;
}
.dcard2 {
  float: left;
}
.dcard3 {
  float: left;
  width: 35px;
  height: 35px;
  border-radius: 30px;
  background-color: #f6f0fe;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.dcard4 {
  float: left;
  font-size: 14px;
  font-weight: normal;
  text-transform: capitalize;
  margin-left: 6px;
}
.dcard5 {
  clear: left;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.67;
  color: #121f3e;
  margin-top: 5px;
  float: left;
}
.dcard6 {
  font-size: 12px;
  font-weight: normal;
  color: #919bb1;
  float: left;
  clear: left;
  margin-top: -7px;
}

.el-card__header {
  padding: 10px 20px;
}
.el-tab {
  width: 100%;
  float: left;
  margin-top: -15px;
}
</style>
